<template>
  <div class="searchCity">
    <header>
      <router-link :to="{ name: 'Home' }">X</router-link>
      <div class="search_ipt">
        <input type="text" placeholder="城市名/拼音" v-model="txt" />
      </div>
      <ul v-show="txt">
        <li v-for="item in filterCity" :key="item.cityId">{{ item.name }}</li>
      </ul>
    </header>
    <main>
      <h4>您正在看:郑州</h4>
      <h4>全国></h4>
      <p>定位/最近访问</p>
      <div class="location">自动判断</div>
      <div class="hotcity">
        <h4>热门城市</h4>
        <ul>
          <li v-for="i in 15" :key="i"></li>
        </ul>
      </div>
      <div class="rimcity">
        <h4>周边城市</h4>
        <ul>
          <li>信阳</li>
          <li>辽宁</li>
        </ul>
      </div>
      <div class="alphabet">
        <a
          :href="'#' + item"
          v-for="(item, index) in alphabetList"
          :key="index"
          >{{ item.toUpperCase() }}</a
        >
      </div>
      <div class="city_list">
        <ul v-for="(item, index) in classCity" :key="index">
          <p :id="item[0].pinyin[0]">{{ item[0].pinyin[0].toUpperCase() }}</p>
          <li v-for="v in item" :key="v.cityId">{{ v.name }}</li>
        </ul>
      </div>
    </main>
    <!-- 搜索城市searchCity -->
  </div>
</template>

<script>
import { city } from "../../../../static/city.js";
export default {
  data() {
    return {
      txt: "",
      cityList: city.cities,
      alphabetList: [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
      ],
    };
  },
  mounted() {},
  computed: {
    classCity() {
      let arr = [];
      for (var i = 0; i < 26; i++) {
        arr[i] = [];
      }
      this.alphabetList.forEach((item1, index1) => {
        this.cityList.forEach((item2, index2) => {
          if (item1 == item2.pinyin[0]) {
            arr[index1].push(item2);
          }
        });
      });
      return arr.filter((item) => item.length != 0);
    },
    filterCity() {
      return this.cityList.filter(
        (item) => item.name.includes(this.txt) || item.pinyin.includes(this.txt)
      );
    },
  },
};
</script>

<style scoped lang="scss">
.searchCity {
  font-size: 28px;
  header {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    a {
      font-size: 35px;
    }
    ul {
      position: absolute;
      top: 50px;
      width: 400px;
      height: 400px;
      background: #fff;
      overflow-y: auto;
      li {
        padding: 10px 0 10px 20px;
      }
    }
    .search_ipt {
      width: 650px;
      height: 50px;
      border: 1px solid #ddd;
      border-radius: 25px;
      padding: 10px 0px 0 50px;
      input {
        border: none;
        outline: none;
      }
    }
  }
  main {
    & > h4 {
      margin: 30px;
    }
    & > p {
      margin: 0 0 30px 30px;
    }
    .location {
      width: 280px;
      height: 70px;
      margin-left: 30px;
      text-align: center;
      line-height: 70px;
      background-color: #ddd;
    }
    .hotcity {
      margin: 30px;
      ul {
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        li {
          margin-top: 20px;
          width: 220px;
          height: 70px;
          background-color: #ddd;
        }
      }
    }
    .alphabet {
      position: fixed;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      top: 50%;
      transform: translateY(-50%);
      a {
        color: black;
      }
    }
    .rimcity {
      margin: 30px;
      ul {
        overflow: hidden;
        li {
          margin-top: 30px;
          margin-right: 20px;
          width: 220px;
          height: 70px;
          text-align: center;
          line-height: 70px;
          background-color: #ddd;
          float: left;
        }
      }
    }
    .city_list {
      // margin-left: 30px;
      ul {
        p {
          margin-left: 30px;
          margin-top: 50px;
        }
        li {
          padding: 30px 0 20px 30px;
          width: 100%;
          height: 100px;
          // background-color: red;
          border-bottom: 1px solid #ddd;
        }
      }
    }
  }
}
</style>